export function renderComponent(h, item, key, $this, col, formAttr, responsive) {

    const { values } = $this
    const value = values[key] ?? undefined
    const modelEvents = {
        input: function (value) {
            values[key] = value
        },
        ...$this.filterEvents(item)
    }
    const { typeName, label, size } = item
    let regPlaceholderLabel = ''
    if ((item.typeName === 'input' || item.typeName === 'el-input' || item.typeName === 'el-input-number') && item?.label) {
        regPlaceholderLabel = '请输入' + item?.label.replace(/(:$)/g, '')
    }
    let styleRange = {}
    if ((item?.type ?? '').indexOf('range') !== -1) {
        styleRange.width = 'auto'
        styleRange['min-width'] = '270px'
        styleRange['max-width'] = '370px'
    }
    const formEachItem = h(typeName, {
        style: item.style || { ...styleRange },
        class: item?.class || '',
        attrs: {
            placeholder: item.placeholder ? item.placeholder : regPlaceholderLabel,
            ...$this.filterAttrs(item)
        },
        props: {
            value,
            ...item
        },
        on: {
            ...modelEvents
        }
    }, item.text ? item.text : '')
    const elselect = h(
        'el-select', {
        style: item.style || {},
        class: item?.class || '',
        attrs: {
            placeholder: item.placeholder ? item.placeholder : '请选择' + regPlaceholderLabel,
            ...$this.filterAttrs(item)
        },
        props: {
            value,
            ...item
        },
        on: {
            ...modelEvents
        }
    }, (item.options || []).map(option => {
        return h('el-option', {
            attrs: {
                placeholder: item.placeholder ? item.placeholder : '请选择' + regPlaceholderLabel,
                ...$this.filterAttrs(option)
            },
            props: {
                key: option.value,
                ...option
            }
        })
    })
    )
    const elradios = (item.options || []).map(option => {
        option = {
            name: item?.name,
            ...option
        }
        return h(
            'el-radio', {
            style: item.style || {},
            class: item?.class || '',
            attrs: {
                ...$this.filterAttrs(option)
            },
            props: {
                value,
                ...option
            },
            on: {
                ...modelEvents
            }
        },
            [
                option.text
            ]
        )
    })
    const apsDes = h('div', {
        style: item.style || {},
        class: 'des-value ' + (item?.class || ''),
        domProps: {
            innerText: (value ? value : item.value) ?? ''
        },
        on: {
            ...modelEvents
        }
    })
    const elRadioGroup = h('el-radio-group', {
            style:item.style||{},
            class:'aps-RG'+ (item?.class ? ('-'+item?.class):''),
            props: {
             value,
             ...item
            },
            on: {
                ...modelEvents
            }
        },(item.options || []).map(option => {
            return h(
                'el-radio', {
                style: item.style || {},
                class: item?.class || '',
                attrs: {
                    ...$this.filterAttrs(option)
                },
                props: {
                    label:option.value,
                    ...option
                }
            },
                [
                    option.name
                ]
            )
        }))
    const elements = {
        [item.typeName]: formEachItem,
        'el-select': elselect,
        'el-radios': elradios,
        'aps-des': apsDes,
        'el-radio-group': elRadioGroup
    }
    let newCol = item.bsColumn?.col ?? col
    const custom = item.bsColumn?.custom ?? undefined
    let customResponsive = custom || responsive
    const middle = formAttr?.bsColumn?.middle || undefined
    if (newCol) {
        return h('el-col', {
            attrs: {
                ...custom ?? '',
                ...customResponsive[newCol]
            },
        }, [h(
            'el-form-item', {
            class: 'aps-form-item' + (middle ? '-middle' : ''),
            props: {
                prop: key,
                label,
                size
            }
        },
            [elements[typeName]]
        )]
        )
    } else {
        return h(
            'el-form-item', {
            props: {
                prop: key,
                label,
                size
            }
        },
            [elements[typeName]]
        )
    }
}


